<template>
    <article @click="asdd" class="article2">
        <section class="tiBox">
            <div class="tiContent" @mouseup.stop="highlight($event)" id="annotateContent" v-html="props.modelValue.answer">
            </div>
        </section>

        <div>
            <div class="labelbutton2" id="labelbutton2" v-show="labelDialog">
                <div v-if="modify" @click="addFront('mistake')">
                    <svg class="icon" aria-hidden="true" style="color: #2da1fa;">
                        <use xlink:href="#icon-shanchu"></use>
                    </svg>
                    <span> 删除</span>
                </div>
                <div v-if="modify" @click="addFront('revise')"> <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-xiugai"></use>
                    </svg> <span>修改</span> </div>
                <div v-if="modify" @click="addFront('front')">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pic-left"></use>
                    </svg> <span>前插文字</span>
                </div>
                <div v-if="modify" @click="addFront('end')"> <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-pic-right"></use>
                    </svg> <span>后插文字</span> </div>
                <div v-if="!modify" @click="goBackDel">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-iconfonttubiao_fanhui-chexiao"></use>
                    </svg>
                    <span class="spanreserve">撤回</span>
                </div>
            </div>
        </div>
        <div class="delSvg" @click="goBackDel" id="delSvg">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shanchu2"></use>
            </svg>
        </div>

        <div v-show="dialogFormVisible" id="dialog" class="dialog">
            <el-form :model="form">
                <el-form-item :label="typeName[typeValue]" label-width="90px">
                    <el-input v-model="form.name" autocomplete="off" style="width: 300px;" />
                </el-form-item>

            </el-form>

            <span class="dialog-footer">
                <div style="width: 87%;display: flex;flex-direction: row-reverse;">
                    <div>
                        <el-button @click="dialogClick2">取消</el-button>
                        <el-button type="primary" @click="dialogClick">
                            确定
                        </el-button>
                    </div>
                </div>
            </span>
        </div>
    </article>
</template>
<script setup>
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import '../../iconFont/font/iconfont'
import '../../iconFont/mistake/iconfont'
const emit = defineEmits(["setAnswer"])
import { ElMessage } from "element-plus"
const props = defineProps({
    modelValue: {
        type: [String, Object, Array],
        default: {
            "mistake": [],
            "front": [],
            "end": [],
            "revise": [],
            "answer": ''
        },
    },
    preview: {
        type: Boolean,
        default: true
    },

    subjectEditorValue: {
        type: [String, Object, Array],
        default: '',
    }
});
const typeName = {
    'mistake': '错误',
    'front': '前置添加',
    'end': '后置添加',
    'revise': '修改'
};
const dialogVisible = ref(false);
const elDog = ref(null)
const labelDialog = ref(false);
const editButton = ref(false);
const textChose = ref('');
const sel = ref(null);
const range = ref(null)
let editButton_spanId = ref(null);
let labels = reactive([]);
const dialogFormVisible = ref(false);
const lsUuid = ref(null);
const XYposition = reactive({
    X: null,
    Y: null
})

const modify = ref(true)

/** 获取随机id */
const getIdNew = () => {
    let id = Math.random();
    return 'msg' + id
};
const form = reactive({});
const status = ref(null)
const htmlpreView = ref('')

const setSelectTextIndex = reactive({
    start: -1,
    end: -1,
    selectedText: ''
})
/** 储存答案数据 */
const answerList = {
    "mistake": [],
    "front": [],
    "end": [],
    "revise": [],
    "answer": ''
};
const setType = () => {
    return {
        type: null,
        text: null,
        start: 0,
        end: 0,
        id: null
    }
}

/** 预览 */
const preview = () => {
    !dialogVisible.value && regChange();
    dialogVisible.value = !dialogVisible.value;

};

/** 获取光标指针位置 */
function getSelectionTextIndex() {
    let start = 0;
    let end = 0;
    let selectedText = '';

    if (window.getSelection) { // 非IE浏览器
        const selection = window.getSelection();
        if (selection.rangeCount > 0) {
            const range = selection.getRangeAt(0);
            const preSelectionRange = range.cloneRange();
            // 获取选择范围的起始节点及其父级元素
            const container = range.startContainer;
            const parentElement = container.parentElement;

            // 执行预处理步骤：排除具有 class=gl123 属性的标签
            var nodes = preSelectionRange.startContainer.parentElement.querySelectorAll("[class='gl123']");
            var excludedContents = [];
            for (var i = 0; i < nodes.length; i++) {
                var node = nodes[i];
                excludedContents.push(node.innerHTML);
                node.innerHTML = '';
                node.setAttribute("class", 'gl123')
            };
            // 计算选择文本的起始索引
            preSelectionRange.selectNodeContents(parentElement);
            preSelectionRange.setEnd(container, range.startOffset);
            start = preSelectionRange.toString().replace(/<[^>]*>/g, '').replace(/\s+/g, '').length;

            // 计算选择文本的结束索引
            end = start + range.toString().replace(/<[^>]*>/g, '').replace(/\s+/g, '').length;
            selectedText = range.toString();
            for (var i = nodes.length - 1; i >= 0; i--) {
                var node = nodes[i];
                node.innerHTML = excludedContents[i];
            }
        }
    } else if (document.selection && document.selection.type !== 'Control') { // IE浏览器
        const textRange = document.selection.createRange();
        selectedText = textRange.text;

        // 使用包含标签的文本内容计算索引
        const container = textRange.parentElement();
        const parentElement = container.parentElement;

        const preSelectionTextRange = document.body.createTextRange();
        preSelectionTextRange.moveToElementText(parentElement);
        preSelectionTextRange.setEndPoint('EndToStart', textRange);
        start = preSelectionTextRange.text.replace(/<[^>]*>/g, '').length;
        end = start + selectedText.replace(/<[^>]*>/g, '').length;
    }

    return {
        start: start,
        end: end,
        selectedText: selectedText
    };
}
let isnode = ref(false)
/** 获取点击位置信息 */
const highlight = (e) => {
    if (!window.getSelection().toString()) {
        labelDialog.value = false; //选中文本后出现标注列表弹框
        dialogFormVisible.value = false
        return;
    }
    // 示例用法
    const selectionTextIndex = getSelectionTextIndex();
    setSelectTextIndex.end = selectionTextIndex.end;
    setSelectTextIndex.start = selectionTextIndex.start;
    setSelectTextIndex.selectedText = selectionTextIndex.selectedText;


    textChose.value = window.getSelection().toString();
    // console.log(textChose.value);
    sel.value = window.getSelection();
    range.value = sel.value.getRangeAt(0);

    let containsElement = Array.from(range.value.commonAncestorContainer.childNodes).some(function (node) {
        return node.nodeType === Node.ELEMENT_NODE;
    });



    let nodes = range.value.commonAncestorContainer;
    if (nodes.nodeType === Node.TEXT_NODE) {
        nodes = nodes.parentNode
    };
    isnode.value = false;
    while (nodes != null) {
        if (nodes.classList && nodes.classList.contains('xin')) {
            isnode.value = true
            ElMessage({
                message: '所选区域内有改错内容，请选择未操作区域',
                type: 'warning',
            })
            return;
        }
        nodes = nodes.parentNode;
    }



    if (containsElement) {
        ElMessage({
            message: '所选区域内有改错内容，请选择未操作区域',
            type: 'warning',
        })
    } else {
        setBoxPosition(e.offsetX, e.offsetY);
        modify.value = true
    }




};
const lookGs = () => {
    let annotateContent = document.getElementById('annotateContent');
    props.modelValue = JSON.parse(JSON.stringify(annotateContent.outerHTML))
    // console.log(annotateContent.outerHTML);
};
/** 计算标注栏弹出的位置 */
const setBoxPosition = (X, Y) => {
    let labellist = document.getElementById(`labelbutton2`);
    // const maxHeight = document.body.scrollWidth;
    let height = Y + 40;
    // if (maxHeight < height + 248) {
    //     height = height - 268;
    // };
    XYposition.X = X + 40;
    XYposition.Y = height;
    labellist.style.cssText = `position:absolute;left:${X + 70}px;top:${height}px;`;
    //弹出标签列表
    labelDialog.value = true;
};
const typeValue = ref(null)
// 判断 选择编辑类型
const addFront = (type, item) => {

    typeValue.value = type;

    if (editButton.value) {  //这个是标注后单击标签，实现修改标签，不需要可以直接走else
        let changeId = editButton_spanId.value;
        let annotateContent =
            document.getElementById(changeId).parentNode.parentNode.parentNode;
        let span = document.getElementById(changeId).parentNode.parentNode;
        span.removeChild(document.getElementById(changeId).parentNode);
        const newSpan = document.createElement("span");
        newSpan.className = "highlight";
        let delIcon = document.createElement("i");
        delIcon.setAttribute("id", item.tagId + "-" + new Date().getTime());
        // // 删除标签
        delIcon.addEventListener("click", (a) => {
            deleteById(a.currentTarget.id);
            // this.delMarking.visible = false;
        });
        delIcon.setAttribute("class", "el-icon-close");
        delIcon.setAttribute("style", " cursor: pointer;width: 10px;height: 10px;border: 1px solid #cccccc;border-radius: 50%; display: inline-flex;justify-content: center; align-items: center;");
        let color = item.tagColor + "40";
        newSpan.innerHTML = `<em style="background:${color};font-style: normal;">${span.innerText.trim()}</em><button style="border:1px solid #ccc;position:relative;vertical-align: super;background:${item.tagColor
            };color:#fff">${item.tagName}</button>`;
        newSpan.lastChild.appendChild(delIcon);
        annotateContent.insertBefore(newSpan, span);
        annotateContent.removeChild(span);
        labelDialog.value = false;
        editButton.value = false;
        editButton_spanId.value = null;
    } else {
        // 添加标签
        if (!textChose.value) { //如果选中文本为空，直接返回
            return;
        };
        let typeList = {
            'mistake': () => {
                addMarking(type, sel.value, range.value);//标注时间
            },
            'front': () => {
                let elDog = document.getElementById(`dialog`);
                // elDog.setAttribute('style', `top:${XYposition.Y}px;left:${XYposition.X}px`)
                dialogFormVisible.value = true;
                status.value = 1;
            },
            'end': () => {
                let elDog = document.getElementById(`dialog`);
                //  elDog.setAttribute('style', `top:${XYposition.Y}px;left:${XYposition.X}px`)
                dialogFormVisible.value = true;
                status.value = 1;
            },
            'revise': () => {
                let elDog = document.getElementById(`dialog`);
                //  elDog.setAttribute('style', `top:${XYposition.Y}px;left:${XYposition.X}px`)
                dialogFormVisible.value = true;
                status.value = 1;
            }
        };
        typeList[type]();
        var labellist = document.querySelector(`#labelbutton2`);

        labellist.style.cssText = `position:absolute;left:-999px;top:-999px;background:#fff`;
        labelDialog.value = false;

    }


};
let delRef = ref(null)
/**
 * 在文本中生成标注
 * @param {*} type 内容对象
 * @param {*} sel 
 * @param {*} range 
 */
const addMarking = (type, sel, range) => {
    let annotateContent2 = document.getElementById('annotateContent');
    const span = document.createElement("span");
    span.setAttribute("class", "xin");
    /** 删除标签 i */
    let delIcon = document.createElement("i");  // 增加的删除标签
    let bDom = document.createElement("b");
    let uid = getIdNew();

    bDom.setAttribute("id", 'spanId' + uid);
    span.setAttribute("typeSelf", type)
    span.setAttribute('style', 'cursor: pointer;user-select:none')
    span.setAttribute("id", uid);

    delIcon.addEventListener("click", (a) => {
        labelDialog.value = false;
        deleteById(uid);
        // this.delMarking.visible = false;
        a.stopPropagation();
        labels.pop();
    });
    span.addEventListener('click', (e) => {

        modify.value = false;

        setBoxPosition(e.offsetX, e.offsetY);
        lsUuid.value = uid;
        delRef.value = type;
    });


    try {
        range.surroundContents(span); //把指定节点插入选区的起始位置，然后把指定节点的内容替换为选区的内容。
    } catch (e) {
        window.getSelection().removeAllRanges();
        sel.value = null;
        range.value = null;
        textChose.value = null;
        labelDialog.value = false;
        return;
    };
    let typeList = {
        "mistake": () => {
            span.innerHTML = `<em ><b style="-webkit-text-decoration:line-through;text-decoration:line-through #007af0;font-style: normal;font-weight: 500;color:#007af0">${span.innerHTML}</b></em>`
            // span.lastChild.appendChild(delIcon);
            labels.push('1');
            window.getSelection().removeAllRanges();
            sel.value = null;
            range.value = null;
            textChose.value = null;
            props.modelValue.mistake.push({
                id: uid,
                type: 'mistake',
                start: setSelectTextIndex.start,
                end: setSelectTextIndex.end,
                text: setSelectTextIndex.selectedText
            });
        },
        'front': () => {

            let additionalText = document.createTextNode(`${span.innerHTML}`)
            bDom.innerHTML = `<b class="gl123" style="font-style: normal;    font-weight: 500;color:#007af0">${form.name}</b>`
            span.innerHTML = `<em style="font-style: normal;"></em>`;
            span.firstChild.insertBefore(bDom, span.firstChild.firstElementChild)
            span.parentNode.insertBefore(additionalText, span.nextSibling);
            // span.lastChild.appendChild(delIcon);

            labels.push('1');
            window.getSelection().removeAllRanges();
            sel.value = null;
            range.value = null;
            textChose.value = null;
            props.modelValue.front.push({
                id: uid,
                type: 'front',
                start: setSelectTextIndex.start,
                text: form.name
            });
        },
        "end": () => {
            let additionalText = document.createTextNode(`${span.innerHTML}`);
            bDom.innerHTML = `<b class="gl123" style="font-style: normal;    font-weight: 500;color:#007af0">${form.name}</b>`
            span.innerHTML = `<em style="font-style: initial;"></em>`;
            span.lastChild.appendChild(bDom);
            annotateContent2.insertBefore(additionalText, span);
            // span.lastChild.appendChild(delIcon);
            labels.push('1');
            window.getSelection().removeAllRanges();
            sel.value = null;
            range.value = null;
            textChose.value = null;
            props.modelValue.end.push({
                id: uid,
                type: 'end',
                end: setSelectTextIndex.end,
                text: form.name
            });
        },
        "revise": () => {
            span.innerHTML =
                `<em ><b style="font-style: normal;-webkit-text-decoration:line-through;text-decoration:line-through #007af0;color:#007af0;font-weight: 500;">${span.innerHTML}</b></em>`;
            bDom.innerHTML = `<b class="gl123" style="font-style: normal;font-weight: 500;color:#007af0">${form.name}</b>`
            span.lastChild.appendChild(bDom);
            // span.lastChild.appendChild(delIcon);
            labels.push('1');
            window.getSelection().removeAllRanges();
            sel.value = null;
            range.value = null;
            textChose.value = null;
            props.modelValue.revise.push({
                id: uid,
                type: 'revise',
                start: setSelectTextIndex.start,
                end: setSelectTextIndex.end,
                text: setSelectTextIndex.selectedText,
                reviseText: form.name
            });


        }
    };

    typeList[type]();
    let annotateContent = document.getElementById('annotateContent');
    const fileContent = annotateContent.innerHTML;

    const fragment = document.createRange().createContextualFragment(fileContent);
    const serializer = new XMLSerializer()
    const exportedHTML = serializer.serializeToString(fragment)
    props.modelValue.answer = exportedHTML;
    dialogVisible.value && regChange();

    setTimeout(() => {
        addLabelDel()

    })
};
// 删除标记
const deleteById = (id) => {
    let annotateContent =
        document.getElementById(id).parentNode;
    let span = document.getElementById(id);
    let button = document.getElementById(id).childNodes[0];
    let bDom = document.getElementById('spanId' + id);
    let emtext = "";
    if (span.firstChild.getElementsByTagName("span").length > 0) {  //判断标注内是否还嵌套有标注，有走if，没有走else（其实这里只需要if就可以了，写的时候可以把代码简化一下）
        bDom && button.removeChild(bDom)
        let kk = span.firstChild.innerHTML
        let newSpan = document.createElement('span');
        newSpan.className = "tagReplace";
        // span.removeChild(button);
        annotateContent.insertBefore(newSpan, span);
        annotateContent.removeChild(span);
        annotateContent.innerHTML = annotateContent.innerHTML.replace('<span class="tagReplace"></span>', kk);
    } else {

        bDom && button.removeChild(bDom)
        emtext = span.firstChild.innerText;
        // span.removeChild(button);
        let textNode = document.createTextNode(emtext);
        annotateContent.insertBefore(textNode, span);
        annotateContent.removeChild(span);
    }
    window.getSelection().removeAllRanges();
    labelDialog.value = false;
    let annotateContent2 = document.getElementById('annotateContent');
    const fileContent = annotateContent2.innerHTML;

    const fragment = document.createRange().createContextualFragment(fileContent);
    const serializer = new XMLSerializer()
    const exportedHTML = serializer.serializeToString(fragment)
    props.modelValue.answer = exportedHTML;
};
const statusId = ref(null)
/** 修改逻辑 */
const changeText = (id) => {
    statusId.value = id;
    dialogFormVisible.value = true;
    status.value = 2;
    let bDom = document.getElementById(id);
    form.name = bDom.firstElementChild.innerHTML;
    // bDom.firstElementChild.innerHTML = '刚修改'
};

/** 撤回操作 */
const goBackDel = () => {
    deleteById(lsUuid.value);
    dialogVisible.value && regChange()
    labels.pop();
    props.modelValue[delRef.value] = props.modelValue[delRef.value].filter(item => item.id != lsUuid.value);
};

/** 正则改变预览样式 */
const regChange = () => {
    let annotateContent = document.getElementById('annotateContent');
    let str = annotateContent.outerHTML;
    let str2 = str.replace(
        /<[^>]*style\s*=\s*(["'])[^"']*text-decoration:\s*line-through\s*#007af0;(?:[^"']*|(?!\1)["']*)*\1[^>]*>((?:(?!<\/?[^>]*>|&nbsp;).)*)<\/[^>]*>/gi,
        '');
    htmlpreView.value = str2.replace(/<[^>]*>/g, '');
    //     // console.log(htmlpreView.value);
}

const dialogClick = () => {
    if (status.value == 1) {
        addMarking(typeValue.value, sel.value, range.value);
        dialogFormVisible.value = false;
        form.name = ''
    } else if (status.value == 2) {
        let bDom = document.getElementById(statusId.value);

        bDom.firstElementChild.innerHTML = form.name;
    }

}
const dialogClick2 = () => {
    dialogFormVisible.value = false;
    form.name = ''
};

watch(() => props.modelValue.answer,
    (newVale) => {
        setTimeout(() => {
            addLabelDel()
        }, 0)

    }, {
    deep: true,
    immediate: true
})


watch(
    () => props.subjectEditorValue,
    (newValue) => {
        props.modelValue.answer = newValue;
        props.modelValue.mistake = [];
        props.modelValue.front = [];
        props.modelValue.end = [];
        props.modelValue.revise = [];
    },
    {
        deep: true,
        // immediate: true,
    }
)

/** 计算标注栏弹出的位置 */
const setBoxPosition1 = (X, Y) => {

    let delSvgDom = document.getElementById('delSvg');

    const maxHeight = document.body.scrollWidth;
    let height = Y - 27;
    if (maxHeight < height + 248) {
        height = height - 268;
    };
    XYposition.X = X + 15;
    XYposition.Y = height;
    delSvgDom.style.cssText = `left:${X + 10}px;top:${height}px;display:flex`;
    //弹出标签列表
    // labelDialog.value = true;
};


/** 给初始化的html 添加事件 */
const addLabelDel = () => {
    let a = document.querySelectorAll(`#annotateContent`)
    const button = document.querySelectorAll(`#annotateContent span i`);
    const bDom = document.querySelectorAll(`#annotateContent span`);
    // console.log(bDom);
    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener("click", (a) => {
            labelDialog.value = false;
            deleteById(a.currentTarget.id);
            a.stopPropagation();
        });
    }

    for (var i = 0; i < bDom.length; i++) {
        // // console.log(bDom[i]);
        (function (index) {
            bDom[index].addEventListener("click", (a) => {
                modify.value = false;
                setBoxPosition(a.offsetX, a.offsetY);
                lsUuid.value = a.currentTarget.id;
                // changeText(a.currentTarget.id)
                delRef.value = bDom[index].getAttribute('typeSelf');
                a.stopPropagation();
            });
        })(i)



        // bDom[i].addEventListener("mouseenter", (a) => {
        //     // setBoxPosition1(a.pageX, a.pageY)
        //     modify.value = false;
        //     setBoxPosition(a.offsetX, a.offsetY);
        //     lsUuid.value = a.currentTarget.id;
        //     // changeText(a.currentTarget.id)
        //     a.stopPropagation();
        // });

        // bDom[i].addEventListener("mouseleave", (a) => {
        //     // let delSvgDom = document.getElementById('delSvg');
        //     setTimeout(() => {
        //         // delSvgDom.setAttribute('style', 'display:none')
        //         labelDialog.value = false

        //     }, 1500);
        // });

    }

};



onBeforeUnmount(() => {
    // lookGs()
})

onMounted(() => {
    if (props.modelValue.answer) {
        setTimeout(() => {
            addLabelDel();

        }, 0);
    }

})

</script>
<style scoped lang="scss">
.icon {
    width: 3em;
    height: 3em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}

.answer-center {
    height: 40px;
    background-color: #f3f3f3;
    padding-left: 10px;
    color: #575757;
    border-bottom: 2px solid #e8e8e8;
    font-weight: 500;
    display: flex;
    align-items: center;

    &>div {
        margin: 0 10px;
    }
}

.delSvg {
    width: 1em;
    height: 1em;
    box-shadow: rgba(240, 75, 75, 0.53) 0px 4px 8px 0px, rgba(53, 43, 43, 0.19) 0px 6px 20px 0px;
    display: none;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    position: absolute;

    .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }
}

.btnPreview {
    .icon {
        width: 1.5em;
        height: 1.5em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    display: flex;
    justify-content: space-around;
    align-items: center;
}

.htmlViewCla {
    color: #2d8cdd;
    padding: 40px;
    font-size: 15px;
    background: #f3f3f3;
    margin-top: 20px;
}

.elclose {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

// .el-icon-close::before{
//     content:":";
// }
.standardDefault {
    color: #FFF;
}

.standardIsDo {
    color: #61a0ff;
}

.standardFalse {
    color: #dd3d3d;
}

.standardTrue {
    color: #00b600;
}

.article2 {
    width: 100%;
    border: 0.06897rem solid #cccccc;
    border-radius: 0.27586rem;
    background: #f3f3f3;
    box-shadow: 0 0 12px #e1e1e1;
}

.elClose {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border: 1px solid #cccccc;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.standardHalfTrue {
    color: #FF8F49;
}

.tiContent {
    flex: 1;
}

.solution ul li {

    min-height: 20px;
}

:deep(.el-dialog__title) {
    color: #252525;
    font-weight: 700;
}

.answer-bottom {
    padding: 20px;

    & div {
        color: rgb(152, 141, 141);

        & span {
            margin-left: 5px;
        }
    }
}

.dialog {
    z-index: 99;
    width: 450px;
    background: rgb(255, 255, 255);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 8px 0px, rgba(0, 0, 0, 0.19) 0px 6px 20px 0px;
    border-radius: 4px;
    position: absolute;
    padding: 40px 10px 20px 10px;
}

.labelbutton2 {
    display: flex;
    flex-direction: column;
    z-index: 9;
    color: #646464;
    overflow: auto;
    width: 120px;
    background: #fff;
    box-shadow: 0 4px 8px 0 rgba(75, 75, 75, 0.2), 0 6px 20px 0 rgba(104, 104, 104, 0.19);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    padding: 10px;

    &>div {
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 40px;
        cursor: pointer;

        span {
            text-align: justify;

            text-align-last: justify;

            /*兼容ie*/

            text-justify: distribute-all-lines;
            width: 60%;
        }

        .spanreserve {
            text-align: center;
            text-align-last: center;
            text-justify: distribute-all-lines;
            width: 60%;
        }
    }

    .icon {
        width: 1.3em;
        height: 1.3em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
    }

    &>div:hover {
        color: #61a0ff;
    }
}

:deep(.el-radio__input.is-disabled + span.el-radio__label) {
    color: #4b4c4d !important;
    cursor: not-allowed;
}

:deep(.el-checkbox__inner) {
    border-radius: 50% !important;
}
</style>